<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button type="primary" @click="getDataList(1)">统计</el-button>
        <el-button @click="checkRecord">查看明细</el-button>
        <el-button @click="exportExcel">导出</el-button>
        <el-button @click="handleShortcutKeyPrint">打印(P)</el-button>
      </div>
      <div class="btn_right">
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_screen">
        <div class="screen_left">
          <div style="width: 220px">
            <p>统计类型</p>
            <el-select @change="selectTjfs" placeholder v-model="tjlx">
              <el-option
                style="font-size: 12px"
                v-for="item in tjlxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="style_div">
            <span>应收款汇总：</span>
            <span class="color_span">¥{{ receivableTotal }}</span>
          </div>
          <div class="style_button">
            <button @click="checkup(1)">查看</button>
          </div>
        </div>
      </div>
      <div class="div_screen">
        <div class="screen_left">
          <div style="width: 220px">
            <el-checkbox v-model="queryData.showGtZero" @change="getDataList(1)">不显示核销后余额为0的记录</el-checkbox>
          </div>
          <div class="style_div">
            <span>应付款汇总：</span>
            <span class="color1_span">¥{{ paymentTotal }}</span>
          </div>
          <div class="style_button">
            <button @click="checkup(2)">查看</button>
          </div>
        </div>
      </div>
      <div class="div_table">
        <div v-if="byTransactionCompany" class="div_tree">
          <div class="tree_div1">
            <p>往来单位类别</p>
          </div>
          <div class="tree_input">
            <p>
              <input type="text" placeholder="查找" v-model="lookupValue" />
              <span>
                <i class="el-icon-search"></i>
              </span>
            </p>
          </div>
          <div class="tree_structure">
            <el-tree
              ref="tree"
              :data="treeData"
              node-key="label"
              highlight-current
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :filter-node-method="filterNode"
            ></el-tree>
          </div>
        </div>
        <div v-if="byTransactionCompany" class="table_content">
          <el-table
            show-summary
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData"
            height="100%"
            style="width: 100%"
            @sort-change="changeSort"
            @row-click="clickRow"
          >
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :prop="item.props"
                min-width="130px"
                :sortable="item.sortable"
                :width="item.props == 'xh' ? '50px' : index == '1' ? '170px' : ''"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      [
                        'totalReceivablePrice',
                        'totalSettlementPrice',
                        'receivableBalance',
                        'totalPayPrice',
                        'totalPaySettlementPrice',
                        'payBalance',
                        'afterSettlementPrice',
                      ].includes(item.props)
                    "
                  >
                    {{ $formatMoney(scope.row[item.props]) }}
                  </span>
                  <span v-else>{{ scope.row[item.props] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div v-else class="table_content new_table_content" style="width: 100%; margin-left: 0">
          <el-table
            show-summary
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData"
            height="100%"
            style="width: 100%"
            @sort-change="changeSort"
          >
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                :prop="item.props"
                min-width="130px"
                :sortable="item.sortable"
                :width="item.props == 'xh' ? '50px' : index == '1' ? '170px' : ''"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      [
                        'totalReceivablePrice',
                        'totalSettlementPrice',
                        'receivableBalance',
                        'totalPayPrice',
                        'totalPaySettlementPrice',
                        'payBalance',
                        'afterSettlementPrice',
                      ].includes(item.props)
                    "
                  >
                    {{ $formatMoney(scope.row[item.props]) }}
                  </span>
                  <span v-else>{{ scope.row[item.props] }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
      <div class="table_pagination">
        <div class="pagination_div">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20, 50, 100, 200]"
            :page-size="pagesize"
            layout="jumper, prev, pager,next, sizes"
            :total="tableDataTotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="应收应付汇总"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import { getAction, postAction, downPostFile } from '@/api/manage'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
import { getTreeAllSubId } from '@/utils/index'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
// 导入调用处理权限数据方法
import {
  handlePermissions,
  handleOtherPerms,
  sysConfig,
  getSystemParamsByName,
  formatMoney,
  formatPrice,
  formatNumber,
  delcommafy,
  handleArrayToObject,
  handleObjectToArray,
} from '@/utils/index'
export default {
  name: 'arAndapSummary',
  components: {
    CConfiguration,
    dialogPrint,
  },
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created() {
    this.queryData.isShowYewl = sysConfig().show_zero_record
    this.getData()
  },
  watch: {
    lookupValue(val) {
      this.$refs.tree.filter(val)
    },
  },
  data() {
    return {
      // 统计类型
      tjlxOptions: [
        {
          value: '1',
          label: '按往来单位汇总',
        },
        {
          value: '2',
          label: '按业务员汇总',
        },
      ],
      byTransactionCompany: true, //按往来单位汇总
      bySalesman: false, //按业务员汇总
      tjlx: '1',
      queryData: {
        showGtZero: true,
        companyTypeIds: '',
      },
      // 表格数据
      tableData: [],
      defaultColumnData: [],
      // 列配置数据
      columnData: [],
      wldwData: [
        {
          id: '1',
          morenName: '序号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 0,
          zidingyiSort: 0,
          noModify: true,
          props: 'xh',
        },
        {
          id: '2',
          morenName: '往来单位编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 1,
          zidingyiSort: 1,
          noModify: false,
          props: 'companyNumber',
        },
        {
          id: '3',
          morenName: '往来单位',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 2,
          zidingyiSort: 2,
          noModify: false,
          props: 'companyId_dictText',
        },
        {
          id: '4',
          morenName: '拼音码',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 3,
          zidingyiSort: 3,
          noModify: false,
          props: 'companyPinyinCode',
        },
        {
          id: '5',
          morenName: '累计应收款',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 4,
          zidingyiSort: 4,
          noModify: false,
          props: 'totalReceivablePrice',
          isSum: true,
        },

        {
          id: '6',
          morenName: '已结销应收款',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 5,
          zidingyiSort: 5,
          noModify: false,
          props: 'totalSettlementPrice',
          isSum: true,
        },
        {
          id: '7',
          morenName: '应收款余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 6,
          zidingyiSort: 6,
          noModify: false,
          props: 'receivableBalance',
          isSum: true,
        },
        {
          id: '8',
          morenName: '累计应付款',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 7,
          zidingyiSort: 7,
          noModify: false,
          props: 'totalPayPrice',
          isSum: true,
        },
        {
          id: '9',
          morenName: '已结销应付款',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 8,
          zidingyiSort: 8,
          noModify: false,
          props: 'totalPaySettlementPrice',
          isSum: true,
        },
        {
          id: '10',
          morenName: '应付款余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 9,
          zidingyiSort: 9,
          noModify: false,
          props: 'payBalance',
          isSum: true,
        },
        {
          id: '11',
          morenName: '核销后余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 10,
          zidingyiSort: 10,
          noModify: false,
          props: 'afterSettlementPrice',
          isSum: true,
        },
        {
          id: '12',
          morenName: '联系人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 11,
          zidingyiSort: 11,
          noModify: false,
          props: 'companyUserName',
        },
        {
          id: '13',
          morenName: '联系电话',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 12,
          zidingyiSort: 12,
          noModify: false,
          props: 'companyLandline',
        },
        {
          id: '14',
          morenName: '手机',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 13,
          zidingyiSort: 13,
          noModify: false,
          props: 'companyPhone',
        },
        {
          id: '15',
          morenName: '联系地址',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 14,
          zidingyiSort: 14,
          noModify: false,
          props: 'address',
        },
      ],
      ywyData: [
        {
          id: '1',
          morenName: '序号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 0,
          zidingyiSort: 0,
          noModify: true,
          props: 'xh',
        },
        {
          id: '2',
          morenName: '部门',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 1,
          zidingyiSort: 1,
          noModify: false,
          props: 'deptId_dictText',
        },
        {
          id: '3',
          morenName: '业务员',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 2,
          zidingyiSort: 2,
          noModify: false,
          props: 'sysUserId_dictText',
        },
        {
          id: '4',
          morenName: '应收款余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 3,
          zidingyiSort: 3,
          noModify: false,
          props: 'receivableBalance',
          isSum: true,
        },
        {
          id: '5',
          morenName: '应付款余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 4,
          zidingyiSort: 4,
          noModify: false,
          props: 'payBalance',
          isSum: true,
        },
        {
          id: '6',
          morenName: '核销后余额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          morenSort: 5,
          zidingyiSort: 5,
          noModify: false,
          props: 'afterSettlementPrice',
          isSum: true,
        },
      ],
      lookupValue: '', //类别查找值
      tableDataTotal: 0, //
      // 类别数据
      treeData: [],
      updateId: '', // 修改列配置时返回的id
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      countFlag: 1, // 1-按往来单位 2-按业务员
      url: {
        byCompanyList: '/xghCollectionPay/xghCollectionPay/countPayAndCollectionVoByCompany',
        byUserList: '/xghCollectionPay/xghCollectionPay/countPayAndCollectionVoByUser',
        companyList: '/xghCompanyType/xghCompanyType/childList',
        exportXlsUrl: '/xghCollectionPay/xghCollectionPay/exportCountPayAndCollectionVoByCompanyXls',
      },
      receivableTotal: 0,
      paymentTotal: 0,
      billName: '应收应付汇总表-按往来单位',
    }
  },
  methods: {
    // 打印
    async handleShortcutKeyPrint() {
      // 查询
      let params = {
        ...this.queryData,
        pageSize: 1000000,
        pageNo: 1,
      }
      let printExclusive = []
      let url = this.countFlag == 1 ? this.url.byCompanyList : this.url.byUserList
      let res = await getAction(url, params)
      printExclusive = (res.result && res.result.records) || []
      printExclusive.forEach((item, index) => {
        item.xh = index + 1
        // 遍历 item 对象的键
        Object.keys(item).map((key) => {
          if (
            [
              'totalReceivablePrice',
              'totalSettlementPrice',
              'receivableBalance',
              'totalPayPrice',
              'totalPaySettlementPrice',
              'payBalance',
              'afterSettlementPrice',
            ].includes(key)
          ) {
            item[key] = this.$formatMoney(item[key])
          }
        })
      })
      // 打印
      // if (!this.buttonsPermissions.DaYin) {
      //   this.$elMessage.warning('未拥有打印权限！')
      // } else
      if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.billName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.billName, () => {
              this.$refs.print.show(printData, this.columnData, this.billName)
            })
          } else {
            this.$refs.print.show(printData, this.columnData, this.billName)
          }
        }
      }
    },
    // 获取数据
    getData() {
      this.getTreeData()
      this.selectTitle()
      this.getDataList(1)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 获取线上的列配置
    async selectTitle() {
      let text = this.countFlag == 1 ? '应收应付汇总表-按往来单位' : '应收应付汇总表-按业务员'
      this.billName = text
      let obj = await this.$setColumn.selectColumn(text)
      console.log(obj)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let data = this.countFlag == 1 ? this.$options.data().wldwData : this.$options.data().ywyData
        let id = await this.$setColumn.addColumn(text, data)
        this.updateId = id
      }
    },
    // 触发列配置弹框
    onShowColumn() {
      this.defaultColumnData = this.countFlag == 1 ? this.$options.data().wldwData : this.$options.data().ywyData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let text = this.countFlag == 1 ? '应收应付汇总表-按往来单位' : '应收应付汇总表-按业务员'
      this.billName = text
      let res = await this.$setColumn.editColumn(text, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    /**
     *  查询往来单位类别列表
     */
    getTreeData() {
      getAction(this.url.companyList, {}).then((res) => {
        if (res.code === 200) {
          let list = res.result
          let result = this.getTreeDataByList(list, '0', '')
          this.treeData = [
            {
              id: '0',
              label: '全部',
              children: result,
            },
          ]
        }
      })
    },
    getTreeDataByList(list, parentId, parentName) {
      let data = []
      for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (element.pid == parentId) {
          data.push({
            ...element,
            id: element.id,
            label: element.companyTypeName,
            parentId,
            parentName,
            children: this.getTreeDataByList(list, element.id, element.companyTypeName),
          })
        }
      }
      return data
    },
    // 触发树形当前节点
    handleNodeClick(data) {
      console.log('往来单位类别选择', data)
      if (data.id != '0') {
        let result = []
        getTreeAllSubId(data, result, true)
        console.log(result)
        this.queryData.companyTypeIds = result.join(',')
      } else {
        this.queryData.companyTypeIds = undefined
      }
      this.getDataList(1)
    },
    /**
     *  查询应收应付列表
     */
    getDataList(page) {
      if (page == 1) {
        this.currentPage = 1
      }
      /**
       *  countFlag: 1-按往来单位 2-按业务员
       *  showFlag: 1-显示红冲，0-不显示红冲 前端暂无显示，先不传
       *  orderFlag: 1-按时间倒序排列 2-按时间正序排列 前端用不着
       */
      let params = {
        ...this.queryData,
        pageSize: this.pagesize,
        pageNo: this.currentPage,
      }
      let url = this.countFlag == 1 ? this.url.byCompanyList : this.url.byUserList
      getAction(url, params).then((res) => {
        console.log('应收应付列表', res.result.records)
        this.tableData = res.result.records || []
        this.tableDataTotal = res.result.total
        if (this.tableData.length > 0) {
          let i = this.tableData[0]
          this.receivableTotal = formatMoney(i.allReceivablePrice)
          this.paymentTotal = formatMoney(i.allPayPrice)
        } else {
          this.receivableTotal = formatMoney(0)
          this.paymentTotal = formatMoney(0)
        }
        this.tableData.forEach((item, index) => {
          item.xh = index + 1
        })
      })
    },
    // 选中列表
    clickRow(row) {
      this.selectRow = row
    },
    // 查看明细
    checkRecord() {
      if (JSON.stringify(this.selectRow) == '{}') {
        this.$elMessage.warning('请先选择列表信息')
        return
      }
      this.$router.push({
        name: 'reportStatistics-paymentReport-arAndapReconciliation', //往来对账（单据）
        params: {
          companyId: this.selectRow.companyId,
        },
      })
    },
    // 到别处看看
    checkup(type) {
      let path = '/reportStatistics/paymentReport/accountsPayable'
      if (type == 1) {
        path = '/reportStatistics/paymentReport/accountsReceivable'
      }
      this.$router.push({ path: path })
    },
    // 选择统计方式
    selectTjfs(val) {
      // 1-按往来单位 2-按业务员
      if (val == '1') {
        this.countFlag = 1
        this.byTransactionCompany = true
        this.bySalesman = false
        this.url.exportXlsUrl = '/xghCollectionPay/xghCollectionPay/exportCountPayAndCollectionVoByCompanyXls'
      } else if (val == '2') {
        this.countFlag = 2
        this.byTransactionCompany = false
        this.bySalesman = true
        this.url.exportXlsUrl = '/xghCollectionPay/xghCollectionPay/exportCountPayAndCollectionVoByUserXls'
      }
      this.selectTitle()
      this.currentPage = 1
      this.getDataList(1)
    },
    // 从后台获取数据,重新排序
    changeSort(val) {
      console.log(val) // column: {…} order: "ascending" prop: "date"
      // 根据当前排序重新获取后台数据,一般后台会需要一个排序的参数
    },

    // 设置列配置（实现列的显示隐藏、列名修改、还原默认值；上下移动列未实现）
    setColumn() {
      let getTable = document.getElementsByClassName('table_content')[0]
      let getTr = getTable.getElementsByTagName('tr')
      getTr.forEach((item) => {
        let getTd = item.getElementsByClassName('set_order')
        getTd.forEach((item, index) => {
          // item.style.order = this.newColumnData[index].zidingyiSort
          if (this.newColumnData[index].zidingyiState == false) {
            item.style.display = 'none'
          } else {
            item.style.display = 'block'
          }
        })
      })
      let getTh = getTr[0].getElementsByClassName('set_order')
      getTh.forEach((item, index) => {
        // item.style.order = this.newColumnData[index].zidingyiSort
        if (this.newColumnData[index].zidingyiState == false) {
          item.style.display = 'none'
        } else {
          item.style.display = 'block'
        }
      })
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.tableDataTotal + '条明细'
        } else {
          let keys = [
            'totalReceivablePrice',
            'totalSettlementPrice',
            'receivableBalance',
            'totalPayPrice',
            'totalPaySettlementPrice',
            'payBalance',
            'afterSettlementPrice',
          ]
          if (keys.includes(column.property)) {
            const values = data.map((item) => delcommafy(item[column.property]))
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = delcommafy(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0)
              sums[index] = this.$formatMoney(sums[index])
            } else {
              sums[index] = ''
            }
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getDataList(1)
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getDataList()
    },
    // 导出
    exportExcel() {
      let fileName = this.countFlag == 1 ? '应收应付汇总表-按往来单位' : '应收应付汇总表-按业务员'
      let queryParam = {
        ...this.queryData,
        fileName: fileName,
      }
      this.handleExportXlsByStaff(fileName, queryParam)
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 10px 10px;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;

  ::v-deep .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 10px;
    margin-left: 0;
  }

  .el-button--default {
    color: #666;
  }

  ::v-deep .el-select {
    width: 70px;
    height: 30px;
    box-sizing: border-box;
    margin-right: 0.112507rem;

    .el-input {
      .el-input__inner {
        height: 30px;
        border: none;
        font-size: 12px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 0 0.168761rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .div_screen {
    width: 100%;
    // height: 1.6rem;
    height: 48px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;

    ::v-deep .el-select {
      width: 160px;
      height: 30px;
      box-sizing: border-box;
      border-radius: 4px;

      .el-input {
        .el-input__inner {
          height: 30px;
          border-color: #e3e3e3;
          font-size: 12px;
          padding-left: 0.150009rem;
        }

        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }

    ::v-deep .el-checkbox {
      display: flex;
      align-items: center;
      margin-right: 0.25rem;

      .el-checkbox__input {
        height: 14px;
      }

      .el-checkbox__label {
        font-size: 12px;
        padding-left: 0.1rem;
        color: #666;
      }

      .is-checked {
        .el-checkbox__inner {
          background: #1a93fa;
          border-color: #1a93fa;
        }
      }
    }

    .screen_left {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;

      > div {
        height: 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        margin-right: 0.25rem;

        > p {
          margin: 0;
          margin-right: 0.1rem;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }

      .style_div {
        span {
          font-size: 15px;
          font-family: PingFang SC;
          font-weight: 600;
          color: #666666;
        }

        .color_span {
          color: #ff6c00;
          font-size: 25px;
        }

        .color1_span {
          color: #19af36;
          font-size: 25px;
        }
      }

      .style_button {
        button {
          width: 70px;
          height: 100%;
          background: #ffffff;
          border: 1px solid #1b94fb;
          border-radius: 0.075005rem;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #1b94fb;
        }
      }
    }
  }

  .div_table {
    width: 100%;
    height: calc(100% - 150px);
    margin-top: 10px;
    display: flex;
    box-sizing: border-box;

    .div_tree {
      width: 2.812676rem;
      height: 100%;
      box-sizing: border-box;
      padding: 0.131258rem 0;
      border: 0.018751rem solid #e3e3e3;
      transition: all 0.3s;

      .tree_div1 {
        width: 100%;
        box-sizing: border-box;
        padding: 0 0.168761rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          color: #666666;
          font-size: 12px;
        }
      }

      .tree_input {
        width: 100%;
        height: 30px;
        margin-top: 1px;
        box-sizing: border-box;
        padding: 0 10px;

        p {
          width: 100%;
          height: 30px;
          margin: 0;
          box-sizing: border-box;
          border: 1px solid #dddddd;
          display: flex;
          align-items: center;
          position: relative;

          input {
            width: 100%;
            box-sizing: border-box;
            padding: 0 0.6rem 0 0.1rem;
            height: 28px;
            border: none;
            font-size: 12px;

            &:focus {
              outline: none;
            }
          }

          span {
            position: absolute;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.55rem;
            height: 28px;
            background: #fff;

            .el-icon-search {
              font-size: 20px;
              color: rgb(211, 211, 211);
            }
          }
        }
      }

      .tree_structure {
        width: 100%;
        height: calc(100% - 0.33rem - 0.131258rem - 0.131258rem - 0.55rem);
        box-sizing: border-box;
        padding: 0 0.168761rem;
        margin-top: 0.131258rem;
        overflow: auto;

        ::v-deep .el-tree {
          width: 100%;

          .el-tree-node__children {
            .el-tree-node__label {
              color: #666;
              font-weight: normal;
            }
          }

          .el-tree-node__label {
            font-size: 12px;
            font-weight: 600;
          }

          .el-tree-node__content > .el-tree-node__expand-icon {
            padding-left: 0;
          }
        }
      }
    }

    .table_content {
      width: calc(100% - 3.000188rem);
      margin-left: 0.187512rem;
      height: 100%;

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          &:last-child {
            border-right: none;
          }
        }

        .el-table-column--selection {
          .cell {
            padding: 0;
            text-align: center;
          }
        }

        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        .cell {
          line-height: 30px;
          font-size: 12px;
        }

        // colgroup {
        //   width: 100% !important;
        //   display: flex;
        //   align-items: center;
        // }
        // col {
        //   flex: 1;
        // }
        // tr {
        //   width: 100%;
        //   display: flex;
        // }
        // .el-table__header {
        //   th {
        //     &:first-child {
        //       // max-width: 70px;
        //       max-width: .843803rem;
        //     }
        //     &:nth-child(2) {
        //       max-width: 1.312582rem;
        //     }
        //   }
        // }
        // .el-table__body {
        //   height: 30px;
        //   .el-table__row {
        //     td {
        //       // flex: 1;
        //       width: 100%;
        //       &:first-child {
        //         // flex: 0;
        //         // width: 500px !important;
        //         max-width: 70px;
        //         // .cell {
        //         //   order: -99;
        //         // }
        //       }
        //       &:nth-child(2) {
        //         max-width: 1.312582rem;
        //         .cell {
        //           order: -99;
        //         }
        //       }
        //       // &:last-child {
        //       //   max-width: 70px;
        //       //   .cell {
        //       //     order: 99;
        //       //   }
        //       // }
        //     }
        //   }
        //   .current-row {
        //     background: #e3f6ff;
        //   }
        // }
        // th选择框颜色修改
        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        // td选择框颜色修改
        .is-checked {
          .el-checkbox__inner {
            color: #1b93f9;
            background-color: #1b93f9;
            border-color: #1b93f9;
          }
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .new_table_content {
      width: 100%;
      margin-left: 0;
    }
  }

  .table_pagination {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 10px 0;
    display: flex;

    .pagination_div {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      ::v-deep .el-pagination {
        padding: 0;
        height: 30px;

        .el-pagination__sizes {
          margin: 0;

          .el-input {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>